<template>
	<view class="container">
		<!-- <navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" /> -->
		<view class="body">
			<view v-if="addressList.length === 0" class="tip-info">
				<text>暂无地址信息</text>
			</view>
			<view v-else>
				<view v-for="(address, index) in addressList" :key="index" class="address-item">
					<view style="display: flex; flex-direction: column; justify-content: center; padding-right: 15rpx" @tap="setDefault(index)">
						<text class="iconfont icon-duihao default" v-if="defaultAddress.id == address.id"></text>
						<text v-else class="not-default"></text>
					</view>
					<view class="content">
						<view class="address">{{ address.address }}</view>
						<view>
							<text class="info">{{ address.name }} {{ address.phone }}</text>
						</view>
					</view>
					<view class="edit-box" @tap="gotoEditAddress(address)">
						<text class="iconfont icon-bianji edit"></text>
					</view>
				</view>
			</view>
			<view class="add-address">
				<navigator class="add" :url="addUrl" hover-class="none">+ 新增地址</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { listUserAddress, getDefaultAddress, setDefaultAddress } from '@/api/user';
export default {
	onShow() {
		this.getAddressList();
	},
	data() {
		return {
			addressList: [],
			addUrl: '/pages/user/service/user_address/add_address',
			defaultAddress: {}
		};
	},
	methods: {
		async getAddressList() {
			// 获取用户默认地址
			this.defaultAddress = (await getDefaultAddress()).data;
			this.addressList = (await listUserAddress()).data;
			let defaultIdx = -1;
			if (this.defaultAddress != null) {
				for (let i = 0; i < this.addressList.length; i++) {
					if (this.addressList[i].id == this.defaultAddress.id) {
						defaultIdx = i;
						break;
					}
				}
			}
			if (defaultIdx >= 0) {
				this.moveDefaultToHead(defaultIdx);
			}
			console.log(this.addressList);
		},
		gotoEditAddress(address) {
			uni.navigateTo({
				url: '/pages/user/service/user_address/edit_address?address=' + JSON.stringify(address)
			});
		},
		moveDefaultToHead(index) {
			// 将默认地址放到第一位
			let defaultAddress = this.addressList[index];
			this.addressList.splice(index, 1);
			this.addressList.unshift(defaultAddress);
		},
		setDefault(index) {
			let addressId = this.addressList[index].id;
			setDefaultAddress(addressId).then((res) => {
				this.defaultAddress = this.addressList[index];
				this.moveDefaultToHead(index);
			});

			uni.showLoading({
				mask: true,
				title: '提交中'
			});

			setTimeout(function () {
				uni.hideLoading();
				const pages = getCurrentPages();
				if (pages.length >= 2 && pages[pages.length - 2].route == 'pages/order/confirm_order') {
					// 该页上一页是订单确认页跳转过来
					uni.navigateBack(1);
				}
			}, 1000);
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	background-color: #fafafa;
}

.body {
	padding: 20rpx 30rpx;
}

.tip-info {
	padding: 20rpx;
	padding-top: 40rpx;
	text-align: center;
	color: @theme-color;
}

.add-address {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 150rpx;
	padding: 0 10%;
	text-align: center;
	color: #fff;

	.add {
		display: block;
		width: 100%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 50rpx;
	}
}

.address-item {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	padding: 20rpx;
	margin: 30rpx 0;
	border-radius: 15rpx;

	.default {
		color: #fff;
		background-color: @theme-color;
		padding: 5rpx;
		border-radius: 50%;
	}

	.not-default {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 1rpx solid #ccc;
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-left: 20rpx;
		flex: 1;

		.address {
			font-size: 30rpx;
			font-weight: bold;
		}

		.info {
			font-size: 28rpx;
			color: #666666;
		}
	}

	.edit-box {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.edit {
			color: @theme-color;
			font-size: 35rpx;
		}
	}
}
</style>
